<template>
  <div>
    <div class="mb15 pl10">
      <span class="fb mr10">已选 {{ totalLength || 0 }} 家影院</span>
      <zm-button type="primary" size="mini" @click="onAddFilm">
        添加影院
      </zm-button>
    </div>
    <zm-table-data
      :data="tableParams.data"
      :columns="columns"
      :fetch="loadList"
      :table-params="tableParams"
      :mutilple="true"
      pk="id"
      :show-page="false"
      @selection-change="getSelectionIds"
      max-height="500"
    >
    </zm-table-data>
    <zm-button
      class="mt10 mb10"
      icon="el-icon-minus"
      size="mini"
      type="primary"
      @click="handleDel(null)"
      :disabled="isDisabled"
    >
      批量移除
    </zm-button>
    <!-- 选择影院组件，弹窗 -->
    <choose-film
      v-if="choolseFilmParams.visible"
      v-model="choolseFilmParams.visible"
      @handle-after="chooseFilmCallBack"
      :selected-arr="selectedArr"
    ></choose-film>
  </div>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import { columns } from './const'
import chooseFilm from './components/chooseFilm'
import cloudApis from '@/api/src/cloud'
export default {
  name: 'CinemaAssign',
  components: { chooseFilm },
  mixins: [tableMixin],
  props: {
    index: {
      type: Number,
      default: null
    },
    value: {
      type: [String, Number],
      default: () => {}
    },
    type: {
      type: [String, Number],
      default: () => {}
    }
  },
  data () {
    return {
      choolseFilmParams: {
        visible: false
      },
      list: []
    }
  },
  computed: {
    columns () {
      return columns(this)
    },
    // 已选项的 id 数组
    selectedArr () {
      return this.list.map(i => i.id)
    },
    totalLength () {
      return this.list.length
    },
    isDisabled () {
      return this.getSelectionIds().length <= 0
    }
  },
  watch: {},
  created () {
    this.init()
  },
  methods: {
    // 编辑数据回填处理
    async init () {
      // 请求数据，筛选出回填ID对应的数据
      if (this.type === '2' && this.value !== '-1' && this.value && this.value.length > 0) {
        const _res = await cloudApis.getCinemaPageList({ids: this.value, page: 1, pageSize: 999999})
        this.list = _res.list
        this.loadList()
      }
    },
    onAddFilm () {
      this.choolseFilmParams = {
        visible: true
      }
    },
    loadList () {
      this.tableParams.data = this.list
      // .slice((this.tableParams.page - 1) * this.tableParams.pageSize, this.tableParams.page * this.tableParams.pageSize)
      this.initialTableData(this.tableParams.data, this.totalLength)
    },
    // 移除
    handleDel (currentId) {
      const ids = currentId || this.getSelectionIds()
      this.list = this.list.filter((item) => ids.includes(item.id) === false)
      this.loadList()
      const selectedId = this.list.map(i => i.id).join(',')
      this.$emit('handle-after', selectedId)
    },
    // 添加影院组件回调
    async chooseFilmCallBack (val) {
      const _res = await cloudApis.getCinemaPageList({ids: val.join(','), page: 1, pageSize: 999999})
      this.list = _res.list
      this.tableParams.count = val.length
      this.loadList()
      this.$emit('handle-after', val.join(','))
    }
  }
}
</script>

<style scoped lang='scss'>
</style>
